import type { Metadata } from "next"

import { Announcement } from "~/components/announcement"
import { BlocksNav } from "~/components/blocks-nav"
import {
   PageActions,
   PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
} from "~/components/page-header"
import { Button } from "~/registry/miami/ui/button"

import "~/styles/mdx.css"
import Link from "next/link"

export const metadata: Metadata = {
   title: "Building Blocks.",
   description:
      "Beautifully designed. Copy and paste into your apps. Open Source.",
}

export default function BlocksLayout({
   children,
}: {
   children: React.ReactNode
}) {
   return (
      <>
         <PageHeader>
            <Announcement />
            <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
            <PageHeaderDescription>
               Clean, modern building blocks. Copy and paste into your apps.
               Works with all React frameworks. Open Source. Free forever.
            </PageHeaderDescription>
            <PageActions>
               <Button asChild size="sm">
                  <a href="#blocks">Browse Blocks</a>
               </Button>
               <Button asChild variant="ghost" size="sm">
                  <Link href="/docs/blocks">Add a block</Link>
               </Button>
            </PageActions>
         </PageHeader>
         <div id="blocks" className="border-grid scroll-mt-24 border-b">
            <div className="container-wrapper">
               <div className="container flex items-center py-4">
                  <BlocksNav />
               </div>
            </div>
         </div>
         <div className="container-wrapper flex-1">{children}</div>
      </>
   )
}
